<template>
  <div>
    <header id="headNav">
      <div class="innerNav clear">
        <a class="fl" href="#"
          ><img src="@/assets/images/logo_jingdong.png" alt=""
        /></a>
      </div>
    </header>
    <section id="secTab">
      <div class="innerTab">
        <h2>注册</h2>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass"></el-input>
          </el-form-item>

          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>

          <el-form-item label="验证码:" prop="code">
            <el-input v-model="ruleForm.code"></el-input>
          </el-form-item>

           <img
              :src="codeImgUrl"
              width="120px"
              height="40px"
              alt=""
              @click="getCode()"
            />

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </section>
    <footer id="footNav">
      <p>
        <a href="#">沪ICP备13044278号</a
        >|&nbsp;&nbsp;合字B1.B2-20130004&nbsp;&nbsp;|<a href="#">营业执照</a>
      </p>

      <p>Copyright © 京东网上超市 2007-2016，All Rights Reserved</p>
    </footer>
  </div>
</template>

<script>
import { getByName, regist,getYanzheng } from "@/api/user";

export default {
  data() {
    var validateName = (rule, value, callback) => {
      getByName(value).then((response) => {
        if (response.code == 999) {
          callback(new Error("该用户名已存在!"));
        } else {
          callback();
        }
      });
    };

    var validatePass2 = (rule, value, callback) => {
      if (value != this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      codeImgUrl: "",

      ruleForm: {
        username: "",
        password: "",
        email: "",

        code:"",
        uuid:"",
      },

      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { validator: validateName, trigger: "blur" },
        ],

        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        checkPass: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
         code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },

  components: {},

  created(){
    this.getCode();
  },

  methods: {

    

    //获取验证码
    getCode(){
      getYanzheng().then(resp=>{
        this.codeImgUrl = "data:image/jpg;base64,"+resp.data.code;
        this.ruleForm.uuid = resp.data.uuid;
      })
    },


    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          regist(this.ruleForm).then((resp) => {
            if (resp.code == 2000) {
              this.$message("注册成功");
              this.$router.push("/login");
            } else {
              if(resp.message){
                this.$message(resp.message);
              }else{
                this.$message("注册失败");
              }
              this.getCode();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
/* 重置样式 */
.fl {
  float: left;
}
.fr {
  float: right;
}
.clear:after {
  content: "";
  display: block;
  clear: both;
}

/*公共部分*/
body {
  background: #fcfcfc;
}
/*head部分*/
#headNav {
  padding: 16px;
  background: #fff;
  border-bottom: 1px solid #e1e1e1;
  box-shadow: 0px 0px 10px #ccc;
}
.innerNav {
  margin: 0 auto;
  width: 1200px;
  position: relative;
}
#headNav img {
  display: block;
  height: 55px;
  width: auto;
}
.headFont span,
.headFont a {
  line-height: 18px;
  font-family: "SimSun";
  font-size: 12px;
  color: #999;
  vertical-align: middle;
}
.headFont span a {
  color: #06c;
}
.headFont span a:hover {
  color: #f60;
}
.headFont > a {
  margin-left: 25px;
  color: #e60012;
}
.headFont > a {
  margin-left: 25px;
  color: #333;
}

.runbun,
.turnb {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin: 0 4px;
}
.helpLink {
  color: #333;
  font-size: 12px;
}
.helpLink:hover {
  color: #e60012;
}
.outHelp {
  position: absolute;
  top: -4px;
  right: 0;
  width: 98px;
  padding-top: 25px;
  border: 1px solid #ccc;
}
.helpYou {
  background: #fff;
}
.helpYou li a {
  height: 24px;
  display: block;
  padding-left: 25px;
  border-top: 1px dotted #e4e4e4;
  background: #fff;
  line-height: 24px;
  color: #333;
}
.helpYou li a:hover {
  color: #e60012;
}
/*按钮*/
.tableBtn {
  width: 330px;
  height: 52px;
  border: 0 none;
  border-radius: 3px;
  background: #ff3c3c;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  text-shadow: 1px 1px 1px #ff7373;
  font-family: "Microsoft YaHei";
  line-height: 52px;
}
/*foot部分*/
#footNav {
  width: 980px;
  margin: 20px auto 0;
  text-align: center;
}
#footNav p {
  margin-top: 10px;
  color: #333;
}
#footNav p a {
  padding: 0 6px;
  color: #333;
}
#footNav p a:hover {
  color: #c00;
}

/*register.css*/
#secTab {
  padding-top: 26px;
}
.innerTab {
  width: 330px;
  margin: 0 auto;
}
.innerTab > h2 {
  text-align: center;
  font: bold 24px/50px "microsoft yahei";
  color: #333;
  margin-bottom: 10px;
}
.tableItem {
  position: relative;
  z-index: 100;
  height: 24px;
  margin-bottom: 10px;
  padding: 14px 0;
  border: 1px solid #dedede;
  background: #fff;
  line-height: 24px;
}
.tableItem span {
  position: absolute;
  left: 20px;
  top: 0;
  display: none;
  height: 50px;
  font: 14px/50px "sisum";
  color: #666;
}

.onlyItem {
  width: 192px !important;
}
.tableText {
  display: inline-block;
  /*position: relative;*/
  /*z-index: 2;*/
  width: 126px;
  height: 50px;
  margin-left: 10px;
  text-align: center;
  background-color: #57565f;
  font: bold 12px/52px "sisum";
  color: #fff;
  cursor: default;
  border-radius: 2px;
  font-size: 14px;
}
.tableItem input {
  vertical-align: middle;
  width: 100%;
  height: 24px;
  padding: 0 20px;
  border: 0 none;
  line-height: 24px;
  vertical-align: middle;
  font-family: "Microsoft YaHei";
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}
.clickRegist {
  height: 35px;
  line-height: 35px;
  color: #666;
  text-indent: 1em;
}
.clickRegist a {
  color: #06c;
}
</style>